<template>
<view class="myAssets">
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">我的资产</block>
	</cu-custom>	
    <view class="head">
		<view>
			<view class='money'>
				<image src="/static/assets.png"></image>
				<view class="cash">零钱</view>
				<view class="o-s"><text>&yen;</text>{{ Info.coin || '0.00' }}</view>
			</view>
		</view>
    </view>	
	<view class="contain">
		<view class="title">功能</view>
		<view class="grid">
			<view class="line" >
				<navigator hover-class="none" url="/assets/coin">
					<image src="/static/coin.png"></image>
					<view>
						<text>购物币</text>
						<text>{{ Info.currency }}</text>
					</view>
				</navigator>
				<navigator hover-class="none" url='/assets/vipcard'>
					<image src="/static/vip.png"></image>
					<view>
						<text>会员卡</text>
						<text>{{ Info.card }}张</text>
					</view>
				</navigator>
			</view>
			<view class="line">
				<navigator hover-class="none" url='/assets/mycoupon'>
					<image src="/static/coupon.png"></image>
					<view>
						<text>优惠券</text>
						<text>{{ Info.coupon }}</text>
					</view>
				</navigator>
				<navigator hover-class="none" url='/assets/setpwd'>
					<image src="/static/password.png"></image>
					<view>
						<text>支付密码</text>
						<text>设置/修改</text>
					</view>
				</navigator>
			</view>
		</view>
	</view>
	<uni-fab
	:pattern="pattern"
	:content="content"
	:horizontal="horizontal"
	:vertical="vertical"
	:direction="direction"
	@trigger="trigger"
	></uni-fab>
</view>
</template>

<script>
	import { TotalAssets, SwitchWork, UserCoupon, VipCard } from '@/common/api/users'
	import { mapGetters } from 'vuex'
	import UniFab from '@/components/uni-fab'
	export default {
		name: 'assets',
		data() {
			return {
				Info: {},
				params: {
					uname: '',
					ticket: '',
					user_id: '',
					customer_id: ''
				},
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#e4393c'
				},
				content: [
					{
						iconPath: '/static/urecord.png',
						selectedIconPath: '/static/urecord.png',
						text: '记录',
						active: false
					},
					{
						iconPath: '/static/ucash.png',
						selectedIconPath: '/static/ucash.png',
						text: '提现',
						active: false
					},
					{
						iconPath: '/static/give.png',
						selectedIconPath: '/static/give.png',
						text: '转赠',
						active: false
					}					
				]				
			}
		},
		components: { UniFab },
		onLoad() {
			this.getInfo()
		},
		methods: {
			trigger(e) {
				switch(e.index) {
					case 0:
					uni.navigateTo({ url: '/assets/record' })
					break;
					case 1:
					uni.navigateTo({ url: '/assets/cash' })
					break;
					case 2:
					uni.navigateTo({ url: '/assets/give' })
					break;
				}
			},			
			getInfo() {
				if (!this.shop) {
					setTimeout(this.getInfo, 500)
					return
				}
				this.params.uname = this.userInfo.uname
				this.params.ticket = this.userInfo.ticket
				this.params.user_id = this.userInfo.id
				this.params.customer_id = this.shop.customer_id
				uni.showLoading()
				const data = async () => {
					let c = {}
					const Assets = TotalAssets(this.params).then(res => res)
					const work = SwitchWork(this.params).then(res => res)
					const coppon = UserCoupon(Object.assign({}, { coupon_type: 0, op: 'use' }, this.params)).then(res => res)
					const vipCard = VipCard(Object.assign({}, { type: 1 }, this.params)).then(res => res)
					let results = await Promise.all([Assets, work, coppon, vipCard])
					c.coin = results[0].data.money
					c.currency = results[0].data.currency || '0.00'
					c.coupon = results[2].coupon.length
					c.card = results[3].length
					return c
				}
				data().then(res => {
					uni.hideLoading()
					this.Info = res 
				})
			}			
		},
		computed: {
			...mapGetters([
				'userInfo',
				'shop'
			])
		},
	}
</script>

<style lang="less" scoped>
@import '../common/styles/variables.less'; 
.myAssets {
	.head {
		background-color:@headBg;
		color:white;
		padding: 50upx 0 50upx;
		& > view {
			display: flex;
			justify-content: center;
			align-items: center;
			.money {
				font-size: @title;
				display: flex;
				flex-flow: column;
				flex-direction: column;
				align-items: center;
				image {
					width: 120upx;
					height: 120upx;
					display: block;
				}
				.cash { }
				.o-s {
					font-size:@title;
					font-weight: bold;
					text {
						font-size:@minSize;
						padding-right: 10upx;
					}
				}
			}
		}
	}
	.contain {
		.title {
			height: @height;
			display: flex;
			align-items: center;
			margin: 0 15px;
			.border-bottom;
		}
		.grid {
			background:white;
			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.border-bottom;
				& > navigator{
					flex: 1;
					display: flex;
					margin: 0 15px;
					padding: 20upx 0;
					align-items: center;
					position: relative;
					image { width: 80upx; height: 80upx;margin-right: 15upx; display: block }
					& > view {
						display: flex;
						flex-flow: column;
						flex-direction: column;
						justify-content: center;
						font-size: 26upx;
						flex: 1;
					}
					&:first-of-type {
						.border-right;
					}
				}
			}
		}
	}
}
</style>
